<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入  初始化样式 字体图标 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/iconfont.css">

    <!-- 引入jq -->
    <script src="./static/js/jquery/jquery.js"></script>


    <!-- mui css 与js -->
    <link rel="stylesheet" href="./static/js/mui/css/mui.css">
    <script src="./static/js/mui/js/mui.min.js"></script>


    <!-- 引入rem js  -->
    <script src="./static/js/rem/rem.js"></script>




    <link rel="stylesheet" href="./js/home/home.css">


    <style>



    </style>
</head>

<body>


    <header id="header" class="mui-bar mui-bar-nav">

        <h1 class="mui-title">
            <input type="text" placeholder="请输入关键字">
        </h1>
        <a class="mui-icon mui-icon-chat   mui-pull-right"></a>
        <a class=" mui-icon   mui-icon-location   mui-pull-left" href="./city.html"></a>
    </header>




    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="#tabbar">
            <!-- mui-icon -->
            <span class="  mui-icon  iconfont  icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-chat">
            <span class="mui-icon   iconfont  icon-shop "></span>
            <span class="mui-tab-label">商城</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon    iconfont icon-trophy "></span>
            <span class="mui-tab-label">生活服务</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-map">
            <span class="mui-icon   iconfont  icon-team"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>






    <div class="mui-content">
        <!-- 内容区域 -->

        <div class="mui-slider  " id='mybannerBox' style="overflow: hidden;">
            <div class="mui-slider-group  my_group">
                <div class="mui-slider-item"><a href="#"><img src="./images/banner1.png" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="./images/banner2.png" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="./images/banner3.png" /></a></div>

            </div>
        </div>





        <ul class="mui-table-view mui-text-center   mui-clearfix">
            <li class="mui-table-view-cell  mui-pull-left  mui-col-xs-6">Item 1</li>
            <li class="mui-table-view-cell  mui-pull-left mui-col-xs-6">Item 2</li>

        </ul>
        <!-- 9宫格 -->




        <!-- 九宫格功能实现-->
        <div class='my-content1'>


        </div>
        <div class='my-content2'>


        </div>


    </div>



    <script src="./static/js/template/template-web.js"></script>

    <!-- 
    id: "Math.random().toString().slice(2)"
img: "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"
link: "https://wqs.jd.com/data/coss/tolerant/new/3_1.shtml"
title: "京东超市" -->

    <script type="text/html" id='hot1'>

        <div class='hotproduct hot1'>
            <h3>抢手商品</h3>
            <div class="hot-container">
                <ul class="clear-fix">
                    {{each hot1 item index}}
                    <li>
                        <a href={{item.link}}>
                            <img src={{item.img}}  alt={{item.title}} />
                            <span>{{item.title}}</span>

                        </a>
                    </li>
                    {{/each}}
                   
                </ul>
            </div>

        </div>
    </script>




    <script type="text/html" id='hot2'>

        <div class='hotproduct hot2'>
            <h3>男人商品</h3>
            <div class="hot-container">
                <ul class="clear-fix">
                    {{each hot2 item index}}
                    <li>
                        <a href={{item.link}}>
                            <img src={{item.img}}  alt={{item.title}} />
                            <span>{{item.title}}</span>

                        </a>
                    </li>
                    {{/each}}
                   
                </ul>
            </div>
        </div>
       
    </script>



    <script>
        $(function () {
            $.ajax({
                url: './data/homeData.json',
                success: function (res) {
                    console.log(res)
                    //   var hot1=res.hot1
                    //   var hot2=res.hot2

                    var hot1HTMl = template('hot1', res)
                    var hot2HTMl = template('hot2', res)

                    console.log(hot1HTMl)
                    console.log(hot2HTMl);

                    $('.my-content1').html(hot1HTMl)
                    $('.my-content2').html(hot2HTMl)
                }
            })
        })



    </script>

</body>

</html>